<template>
  <div class="continal">
    <!-- 顶部按钮操作区 -->
    <el-row>
      <el-col :span="5">
        <el-button type="primary" @click="addtable"><b>+</b> 新建</el-button>
        <el-button type="primary">删除</el-button>
        <!-- <el-button v-else disabled>删除</el-button> -->
        <el-button type="primary">刷新</el-button>
      </el-col>
    </el-row>
    <!-- 下拉菜单区域 -->
    <el-row :gutter="20" style="margin-top: 30px;">
      <el-col :span="4">
        <!-- 输入名称/编码 -->
        <el-input v-model="Code" placeholder="计划编号" />
      </el-col>
      <el-col :span="4">
        <el-button type="primary">查询</el-button>
        <el-button>重置</el-button>
      </el-col>
    </el-row>
    <!-- table表格区域 -->
    <el-row style="margin-top:30px;">
      <el-table ref="multipleTable" :data="tableData" border tooltip-effect="dark" style="width: 100%">
        <el-table-column type="selection" width="55" />
        <el-table-column fixed prop="Code" label="计划编号" width="170" />
        <el-table-column prop="Material.Name" label="物料" width="180" />
        <el-table-column prop="PlanDate" label="计划日期" width="200" />
        <el-table-column prop="StartDate" label="开始日期" width="200" />
        <el-table-column prop="CreateTime" label="完成日期" width="200" />
        <el-table-column prop="UnitCode" label="生产单元" width="200" />
        <el-table-column prop="Status" label="状态" width="150">
          <template slot-scope="scope"><span :class="[scope.row.Status == 0 ? 'isno' : 'isyes' ]">{{ scope.row.Status == 0 ? '未完成' : '已完成' }}</span></template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <template v-if="scope.row.Status === 0">
              <el-button type="text" size="small" @click="edittable(scope.row)">编辑</el-button>
              <el-button type="text" size="small" @click="deltable(scope.row)">删除</el-button>
              <el-button type="text" size="small" @click="over(scope.row)">已完成</el-button>
            </template>
            <template v-else>
              <el-button type="text" size="small" @click="noover(scope.row)">未完成</el-button>
            </template>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <!-- 新建dialog -->
    <el-dialog :label-position="labelPosition" title="新增" :visible.sync="showDialog" width="65%">
      <el-form ref="formLabelAlign" :label-position="labelPosition" label-width="86px" :model="formLabelAlign" :rules="rules">
        <el-row>
          <el-col style="width: 45%; margin-left:18px;">
            <el-form-item label="计划编号" prop="id">
              <!-- 计划编号 -->
              <el-input v-model="formLabelAlign.Code" disabled placeholder="系统自动生成" />
            </el-form-item>
            <el-form-item label="物料" prop="MaterialId">
              <!-- 物料 -->
              <el-select v-model="formLabelAlign.MaterialId" style="width: 100%;">
                <el-option v-for="item in MateriaList" :key="item.Id" :label="item.Name" :value="item.Id" />
              </el-select>
            </el-form-item>
            <el-form-item label="数量" prop="Num">
              <!-- 数量 -->
              <el-input v-model="formLabelAlign.Num" placeholder="数量" />
            </el-form-item>
            <el-form-item label="开始日期" prop="StartDate">
              <!-- 开始日期 -->
              <el-date-picker v-model="formLabelAlign.StartDate" type="date" placeholder="选择日期" style="width: 100%;" />
            </el-form-item>
            <el-form-item label="备注" prop="Remark">
              <!-- 备注 -->
              <el-input v-model="formLabelAlign.Remark" placeholder="备注" />
            </el-form-item>
            <el-form-item label="生产单元" prop="UnitCode">
              <!-- 生产单元 -->
              <el-input v-model="formLabelAlign.UnitCode" placeholder="生产单元" />
            </el-form-item>
          </el-col>
          <el-col style="width: 45%; margin-left: 30px;">
            <el-form-item label="Bom版本" prop="BomVerId">
              <!-- Bom版本 -->
              <el-input v-model="formLabelAlign.BomVerId" placeholder="Bom版本" />
            </el-form-item>
            <el-form-item label="批次号" prop="BatchNo">
              <!-- 批次号 -->
              <el-input v-model="formLabelAlign.BatchNo" placeholder="批次号" />
            </el-form-item>
            <el-form-item label="计划日期" prop="PlanDate">
              <!-- 计划日期 -->
              <el-date-picker v-model="formLabelAlign.PlanDate" type="date" placeholder="选择日期" style="width: 100%;" />
            </el-form-item>
            <el-form-item label="完成日期" prop="FinishDate">
              <!-- 完成日期 -->
              <el-date-picker v-model="formLabelAlign.FinishDate" type="date" placeholder="选择日期" style="width: 100%;" />
            </el-form-item>
            <el-form-item label="订单编号" prop="OrderNo">
              <!-- 订单编号 -->
              <el-input v-model="formLabelAlign.OrderNo" placeholder="订单编号" />
            </el-form-item>
            <el-form-item label="上级系统Id" prop="RefId">
              <!-- 上级系统Id -->
              <el-input v-model="formLabelAlign.RefId" placeholder="上级系统Id" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <div style="float: right;">
            <el-button @click="closetheadd">取消</el-button>
            <el-button type="primary" @click="save">确定</el-button>
          </div>
        </el-row>

      </el-form>
    </el-dialog>
    <!-- 点击已完成dialog -->
    <el-dialog
      title="确认已经完成吗？"
      :visible.sync="overdialog"
      width="30%"
    >
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeover">取 消</el-button>
        <el-button type="primary" @click="isover">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 点击未完成的dialog -->
    <el-dialog
      title="确定未完成吗？"
      :visible.sync="nooverdialog"
      width="30%"
    >
      <span slot="footer" class="dialog-footer">
        <el-button @click="closenoover">取 消</el-button>
        <el-button type="primary" @click="isnoover">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 删除dialog -->
    <el-dialog
      title="确认删除该料点嘛"
      :visible.sync="deldialog"
      width="30%"
    >
      <span slot="footer" class="dialog-footer">
        <el-button @click="closetable">取 消</el-button>
        <el-button type="primary" @click="deletetable">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getJHList, deleteJH, getStatus, getMaterial, addJH, editJH, editJHData } from '@/api/jihuaguanli'
export default {
  data() {
    return {
      Code: '', // 双向绑定下拉菜单计划编号
      tableData: [{}],
      tableValue: {
        pageIndex: 1,
        pageRows: 10,
        SortField: 'Id',
        SortType: 'asc'
      },
      labelPosition: 'right', // 表单文字对齐方式
      formLabelAlign: {
        Code: '', // 计划编号
        MaterialId: '', // 物料Id
        Num: 0, // 数量
        StartDate: '', // 开始日期
        Remark: '', // 备注
        UnitCode: '', // 生产单元
        BomVerId: '', // Bom版本
        BatchNo: '', // 批次号
        PlanDate: '', // 计划日期
        FinishDate: '', // 完成日期
        OrderNo: '', // 订单号
        RefId: '' // 上级Id
      },
      MateriaList: [{}], // 物料列表
      rules: {
        MaterialId: [{ required: true, message: '请选择物料', trigger: 'change' }],
        Num: [{ required: true, message: '请输入数量', trigger: 'blur' }],
        StartDate: [{ required: true, message: '请选择开始日期', trigger: 'change' }],
        UnitCode: [{ required: true, message: '请输入备注', trigger: 'blur' }],
        BomVerId: [{ required: true, message: '请输入备注', trigger: 'blur' }],
        PlanDate: [{ required: true, message: '请输入备注', trigger: 'blur' }],
        FinishDate: [{ required: true, message: '请输入备注', trigger: 'blur' }]
      }, // 表格规则
      showDialog: false, // 新建按钮dialog框
      deldialog: false, // 删除dialog框
      delId: '', // 点击删除获取的Id
      overdialog: false, // 点击完成dialog
      nooverdialog: false, // 点击未完成
      overId: '', // 点击完成获取的Id
      overType: 1, // 完成类型
      nooverId: '', // 点击未完成获取的Id
      nooverType: 0 // 未完成类型
    }
  },
  created() {
    this.getjgtable()
  },
  methods: {
    // 获取计划管理表格数据
    async getjgtable() {
      const res = await getJHList(this.tableValue)
      console.log('计划管理table表格', res)
      this.tableData = res
    },
    // 打开删除dialog
    deltable(row) {
      this.deldialog = true
      console.log(row)
      this.delId = row.Id
    },
    // 关闭删除dialog框
    closetable() {
      this.deldialog = false
    },
    // 删除表格数据
    async deletetable() {
      await deleteJH([this.delId])
      this.getjgtable()
      this.closetable()
      this.$message.success('删除成功')
    },
    // 打开完成dialog
    over(row) {
      this.overdialog = true
      console.log(row)
      this.overId = row.Id
    },
    // 关闭完成dialog框
    closeover() {
      this.overdialog = false
    },
    // 确定完成
    async isover() {
      await getStatus({ id: this.overId, status: this.overType })
      this.getjgtable()
      this.closeover()
      this.$message.success('操作成功')
    },
    // 打开未完成dialog框
    noover(row) {
      console.log(row)
      this.nooverdialog = true
      this.nooverId = row.Id
    },
    // 关闭未完成dialog框
    closenoover() {
      this.nooverdialog = false
    },
    // 确定未完成
    async isnoover() {
      await getStatus({ id: this.nooverId, status: this.nooverType })
      this.getjgtable()
      this.closenoover()
      this.$message.success('操作成功')
    },
    // 打开新增dialog
    async addtable() {
      this.showDialog = true
      const res = await getMaterial(this.tableValue)
      console.log('物料', res)
      this.MateriaList = res
    },
    // 取消新增计划
    closetheadd() {
      this.formLabelAlign = {
        formLabelAlign: {
          Code: '', // 计划编号
          MaterialId: '', // 物料Id
          Num: 0, // 数量
          StartDate: '', // 开始日期
          Remark: '', // 备注
          UnitCode: '', // 生产单元
          BomVerId: '', // Bom版本
          BatchNo: '', // 批次号
          PlanDate: '', // 计划日期
          FinishDate: '', // 完成日期
          OrderNo: '', // 订单号
          RefId: '' // 上级Id
        }
      }
      this.showDialog = false
    },
    // 新增计划
    async save() {
      this.$refs.formLabelAlign.validate(async(valid) => {
        if (valid) {
          if (this.formLabelAlign.Code !== '') {
            await editJHData(this.formLabelAlign)
            this.getjgtable()
            this.closetheadd()
            this.$message.success('编辑成功')
          } else {
            await addJH(this.formLabelAlign)
            this.$message.success('新增成功')
            this.getjgtable()
            this.closetheadd()
          }
        } else {
          alert('请检查数据！')
        }
      })
    },
    // 点击编辑打开form
    async edittable(row) {
      console.log(row)
      const res = await editJH({ id: row.Id })
      console.log('点击编辑存储的当前区域对象', res)
      this.formLabelAlign = { ...res }
      this.addtable()
    }
  }
}
</script>

<style scoped>
.continal{
  margin-top:100px ;
  margin-left:80px;
}
.isno{
  color: #eb2f96;
  width: 40px;
  position: absolute;
  height: 25px;
  left: 20px;
  border: 1px solid #Eb2F96;
  border-radius:4px;
  text-align: center;
  font-size: 12px;
  background:#fff0f6
}
.isyes{
  color: #52c41a;
  width: 40px;
  position: absolute;
  height: 25px;
  left: 20px;
  border-color: #b7eb8f;
  border-radius:4px;
  text-align: center;
  font-size: 12px;
  background: #f6ffed;
}
</style>
